<!doctype html>
<html>
<head>
<script src="jquery-2.2.4.min.js"></script>
<meta charset="utf-8">
<title>商品管理</title>
</head>
<style>
	body{
		text-align:center
	}
	#box{
		margin:50px auto;
	}
	#queryResult{
		margin: 0 auto;
	}
	h1{
		margin: 0 auto;
	}
	</style>
	<script>
			function add(){
			var id=$("#id").val();
			var name=$("#name").val();
			var price=$("#pricel").val();
			var img=$("#img").val();
			var type=$("#type").val();
			var data={
			id:$("#id").val(),
			name:$("#name").val(),
			price:$("#pricel").val(),
			img:$("#img").val(),
			type:$("#type").val()
			}
		
			$.ajax({
			type:"POST",
			url:"",// url：要请求的跨域接口
			data:data,
			cache:true,
			async:true,
//			dataType:"json",
			success:function(data){
					alert("添加成功");
			},
			error:function(){
				alert('出错了');
			}
		});
	
			}
		$(document).ready(function() {
      $.ajax({
        url : "",//后台请求的数据
        dataType : "json",//数据格式 
        type : "post",//请求方式
        async : false,//是否异步请求
        success : function(data) {  //如果请求成功，返回数据。
        var html = "";
        for(var i=0;i<data.length;i++){  //遍历data数组
            var ls = data[i];   
            html +="<span>测试："+ls.name+"</span>";
          }
          $("#queryResult").html(html); //在html页面id=queryResult的标签里显示html内容
        },
      });
    });
		</script>
<body>
	 <h1>商品管理</h1>

<form id="box">
     <input type="hidden" value="" id="id"  name="id"><br>
名字:<input type="text" value="" id="name" name="name"><br>
价格:<input type="text" value="" id="price" name="price"><br>
图片:<input type="text" value="" id="img"  name="img"><br>
类型:<input type="text" value="" id="type"  name="type"><br>
<input type="text" value="" id=""  name=""><br>

<input type="button" value="添加" id="but" onClick="add()"/>
	<table id="queryResult" align="center" bordercolor="#000" width="300" border="1" cellpadding="3">
      <tr>
		  <td></td>
          <td>名字</td>
          <td>价格</td>
          <td>图片</td>
		  <td>类型</td>
          <td></td>
      </tr>
      <tr>
          <td></td>
          <td></td>
          <td></td>
		  <td></td>
          <td></td>
          <td></td>
      </tr>
  </table>
</form>
</body>
</html>
